import React, { RefObject } from "react";
import style from "../login/index.module.css";
import { Form, Input, Button, Dialog, Radio,Toast  } from "antd-mobile";
import { AlipayCircleFill,UserOutline,UserCircleOutline,FrownFill,HeartFill } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
function Index() {
    const navigate=useNavigate();
  const onFinish = () => {
    localStorage.setItem('token',Math.round(Math.random()*1000))
    Toast.show({
              content: '登陆成功,欢迎用户',
            })
    navigate('/index');
  };

  return (
    <div>
      <Form
        name="form"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="warning" size="large">
            登录
          </Button>
        }
      >
        <Form.Header>
          {" "}
          <h3>账号密码登录</h3>{" "}
        </Form.Header>

        <Form.Item
          name="username"
          label="姓名"
          rules={[{ required: true, message: "姓名不能为空" }]}
        >
          <Input
            onChange={console.log}
            placeholder="国内手机号/用户名/邮箱/卡号"
          />
        </Form.Item>

        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <Input onChange={console.log} placeholder="登录密码" />
        </Form.Item>
      </Form>

        <div className={style.saoma}>
            <span onClick={()=>navigate('/soma')}>扫码登录</span>
        </div>

      <span className={style.lan}>
        <Radio /> 阅读并同意携程的 <a>服务协议</a>和<a>个人信息保护政策</a>{" "}
      </span>

      <div className={style.lane}>
        <a style={{marginLeft:'20px'}}>验证码登录</a> <a style={{marginLeft:'240px'}}>免费注册</a>
      </div>

      <div className={style.lanes}>
        <span>境外手机</span>
        <span>|</span>
        <span>公司客户</span>
        <span>|</span>
        <span>携程通</span>
      </div>    


      <div className={style.laness}>
        <span> <AlipayCircleFill fontSize={24} /> </span>
        <span> <UserOutline fontSize={24} /> </span>
        <span> <UserCircleOutline fontSize={24} /> </span>
        <span> <FrownFill fontSize={24} /> </span>
        <span> <HeartFill fontSize={24} /> </span>
      </div>
    </div>
  );
}

export default Index;
